<template>
  <div class="announcementNews headerTopMain">
    <div class="systemOfList">
      <div class="systemOfListBox scrollBar">
        <ul class="systemOfUl">
          <li class="systemOfListItem" v-for="(listItem,listIndex) in announcementData" :key="listIndex">
            <div class="listTitle clearFiex" @click="systemOfListOpen(listIndex)">
              <div class="clearFiex">
                <p class="title floatLeft">{{listItem.title}}</p>
                <p class="title floatRight">{{_Util.formatDateTime(listItem.startTime)}}</p>
              </div>
              <div class="listInfo" v-html="listItem.content"></div>
            </div>
            <div class="listContent" v-html="listItem.content"></div>
          </li>
        </ul>
        <div class="loadingMore" @click="loadingMore">{{announceText}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import './main.scss';
  export default {
    data() {
      return {
        announcementData: [], //列表接口
        announceText: '点击加载更多',
        currentIndex: '-1',
        submission: {
          pages: 1,
          pageNum: 1,
          pageSize: 10,
        },
      }
    },
    created() {},
    mounted() {},
    activated() {
      this.init();
      this.initData();
    },
    methods: {
      init() {
        setTimeout(() => {
          let height = $(window).height();
          $(".announcementNews").height(height - 62 - 68 - $(".breadcrumb").outerHeight());
        }, 600)
        this.announcementData = [];
        this.announceText = "点击加载更多";
        this.submission = {
          pages: 1,
          pageNum: 1,
          pageSize: 10,
        };
      },
      initData() {
        let that = this;
        if (that.submission.pageNum > this.submission.pages) {
          that._Util.showAlert("没有更多数据了");
          that.announceText = "~没有更多数据了~";
          return false;
        }
        that._Util.post(that, that._Api.POST_GET_NOTICE_BY_PAGE, that.submission, (data) => {
          that.announcementData = this.announcementData.concat(data.result||[]);
          that.submission.pages = data.pages || '1';
        });
      },
      systemOfListOpen(index) {
        let that = this;
        that.currentIndex = index;
        if(index=='-1') return;
        if ($(".systemOfListItem").eq(index).hasClass("on")) {
          $(".systemOfListItem").eq(index).removeClass("on");
        } else {
          $(".systemOfListItem").removeClass("on");
          $(".listInfo").show();
          $(".systemOfListItem").eq(index).addClass("on");
        }
        $(".listContent").stop().slideUp(300);
        $(".listContent").eq(index).stop().slideToggle(300);
        $(".systemOfListBox").scrollTop($(".systemOfListItem").eq(index).offset().top-$(".breadcrumb").outerHeight()-80);
        if ($(".systemOfListItem").eq(index).hasClass("on")) {
          $(".listInfo").eq(index).hide();
        } else {
          setTimeout(() => {
            $(".listInfo").eq(index).show();
          }, 300)
        }
      },
      //获取公告详情index
      getAnnListIndex(id) {
        let index = '-1';
        this.announcementData.forEach((v, i) => {
          if (v.id == id) {
            index = i;
          }
        });
        return index;
      },
      loadingMore() {
        this.submission.pageNum += 1;
        this.initData();
      }
    },
    watch: {
      'announcementData'(val) {
        if(val.length<=0) return;
        setTimeout(() => {
          this.systemOfListOpen(this.getAnnListIndex(this.$route.query.noticeId));
        },600);
      },
    }
  }
</script>
